<template>
  <div class="pie-box" :style="{ width: '100%', height: height }">
    <div class="Echart_pie" :style="{ width: height }">
      <div
        class="tb"
        :id="dataA.id"
        :style="{ width: '100%', height: height }"
      ></div>
      <p>{{ dataA.name }}</p>
    </div>
    <div class="text" :style="{ width: 'calc(100% - ' + height + ')' }">
      <div class="leng">
        <div
          v-for="(item, index) in dataA.data"
          :key="index"
          :style="{ margin: margin + 'px 0px' }"
        >
          <i
            :style="
              item.color
                ? { background: item.color }
                : { background: colorList[index] }
            "
          ></i>
          <p>{{ item.name }}</p>
          <div
            class="zb mT5 mR10"
            v-if="dataA.zb"
            :class="dataA.zb > 0 ? 'red' : 'green'"
          >
            {{ dataA.zb }}%
          </div>
          <span>{{ item.value }}{{ dataA.dw }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    margin: Number,
    height: {
      type: String,
      default: '250px'
    },
    dataA: {
      type: Object,
      default() {
        return {
          id: "EC",
          echData: 10,
          echDw: "家",
          dw: "万元",
          zb: "+10",
          data: [
            {
              value: 120,
              name: "幼年",
            },
            {
              value: 353,
              name: "青年",
            },
            {
              value: 235,
              name: "中年",
            },
            {
              value: 286,
              name: "壮年",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      colorList: ["#2ed0d2", "#68abff", "#a490ff", "#ef5570", "#ffb129"],
      zs: 0,
    };
  },
  mounted() {
    setTimeout(() => {
			this.initChart()
		}, 20)
  },
  methods: {
    initChart() {
        let _this = this;
        this.dataA.data.forEach((element) => {
          _this.zs += element.value;
        });
        let myChart = echarts.init(document.getElementById(this.dataA.id));
        let colorList = this.colorList;

        let option = {
          title: [
            {
              text: this.dataA.echData,

              top: "35%",
              x: "center",
              textStyle: {
                fontSize: 24,
                fontWeight: "normal",
                fontFamily: "Bahnschrift",
                color: ["#333"],
              },
            },
            {
              text: this.dataA.echDw,

              top: "56%",
              x: "center",
              textStyle: {
                fontSize: 14,
                fontWeight: "normal",
                fontFamily: "Bahnschrift",
                color: ["#333"],
              },
            },
          ],
          tooltip: {
            show: true,
            formatter: "{b}<br>{d}%",
          },
          grid: {
            left: 0,
            right: "0%",
          },
          series: [
            // 主要展示层的
            {
              radius: ["60%", "80%"],
              center: ["50%", "50%"],
              type: "pie",
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                },
              },

              data: this.dataA.data,
            },
            // 边框的设置
            {
              radius: ["60%", "70%"],
              center: ["50%", "50%"],
              type: "pie",
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              animation: false,
              tooltip: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: ["rgba(250,250,250,0.2)", "rgba(250,250,250,0.2)"],
                },
              },
              data: [
                {
                  value: 1,
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
        window.onresize = function () {
          myChart.resize();
        };
    }
  }
};
</script>

<style scoped lang="less">
.zb {
  color: #fff;
  font-size: 12px;
  border-radius: 7px;
  height: 14px;
  padding: 0px 5px;
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
  float: right;
  line-height: 14px;
  font-family: Microsoft YaHei;

  &.red {
    background: #ef5570;
  }

  &.green {
    background: #1cbbbd;
  }
}

.Echart_pie {
  position: relative;
  float: left;

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    // background: url("../assets/icon-echart-a.png") no-repeat center;
    z-index: 1;
  }

  .tb {
    position: relative;
    z-index: 2;
  }
}

.pie-box {
  .text {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    float: left;
    text-align: left;
    position: relative;

    .leng {
      vertical-align: middle;
      top: 50%;
      position: relative;
      transform: translateY(-50%);

      > div {
        display: inline-block;
        width: 100%;
        background: #f5f5f7;
        line-height: 32px;
        position: relative;
        height: 32px;
        color: #424160;
        margin: 5px 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        i {
          width: 6px;
          display: inline-block;
          height: 32px;
          background: #ff00ff;
          vertical-align: top;
          margin-right: 4px;
        }

        p {
          display: inline-block;
          width: calc(100% - 80px);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        span {
          display: inline-block;
          float: right;
          margin-right: 10px;
          min-width: 50px;
          text-align: right;
        }
      }
    }
  }
}
</style>
